 :root {
     --primary-color: #1E40AF;
     /* 深蓝色主色调 */
     --secondary-color: #3B82F6;
     /* 浅蓝色辅助色 */
     --neutral-color: #F1F5F9;
     /* 中性背景色 */
     --dark-color: #0F172A;
     /* 深色文本 */
     --light-color: #FFFFFF;
     /* 浅色背景 */
     --error-color: #EF4444;
     /* 错误提示色 */
     --border-color: #E2E8F0;
     /* 边框颜色 */
 }

 body {
     min-height: 200vh;
     /* background-color: var(--secondary-color); */
     background: linear-gradient(135deg, #1E40AF 0%, #f2f4f8 100%);
 }

 .head {
     display: flex;
     align-items: center;
     width: 1226px;
     height: 100px;
     background-color: #eaf2fb;
     ;
     margin: 60px auto 20px;
     border-radius: 15px;
 }

 .head-icon {
     width: 50px;
     height: 50px;
     background-image: url("../image/head-icon-50px.png");
     background-repeat: no-repeat;
     background-size: 50px 50px;
     margin-left: 30px;
     margin-right: 25px;
 }

 .head-h {
     /* font-family: Microsoft YaHei; */
     font-family: "Roboto", "Segoe UI", sans-serif;
     font-size: 25px;
     font-weight: 400;
     color: #4d4c4c;
     margin-right: 600px;
 }

 .head-user-photo {
     width: 50px;
     height: 50px;
     background-image: url("../image/head-photo.jpg");
     background-repeat: no-repeat;
     background-size: 50px 50px;
     margin-left: 25px;
     border-radius: 10px;
     border: 1px dashed black;

 }

 .nav {
     display: flex;
     width: 1226px;
     height: 800px;
     margin: 0 auto 200px auto;
 }

 .detail-left {
     width: 300px;
     height: 870px;
     background-color: #eaf2fb;
     margin-right: 15px;
     border-radius: 15px;
 }

 ul {
     list-style: none;
     padding-left: 0;
     padding-top: 0;
 }

 .detail-left li {
     display: flex;
     align-items: center;
     width: 300px;
     height: 80px;
     font-size: 20px;
     line-height: 50px;
     margin-left: 60px;
 }

 .detail-left li .left-icon1 {
     width: 30px;
     height: 30px;
     background-image: url("../image/left-总览-50px.png");
     background-size: 30px 30px;
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 10px;
     margin-right: 10px;
 }

 .detail-left li .left-icon2 {
     width: 30px;
     height: 30px;
     background-image: url("../image/left-教师-50px.png");
     background-size: 30px 30px;
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 10px;
     margin-right: 10px;
 }

 .detail-left li .left-icon3 {
     width: 30px;
     height: 30px;
     background-image: url("../image/left-证书-50px.png");
     background-size: 30px 30px;
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 10px;
     margin-right: 10px;
 }

 .detail-left li .left-icon4 {
     width: 40px;
     height: 40px;
     background-image: url("../image/left-申请-50px.png");
     background-size: 40px 40px;
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 5px;
     margin-right: 5px;
 }

 .detail-left li .left-icon5 {
     width: 40px;
     height: 40px;
     background-image: url("../image/left-分析-48.png");
     background-size: 40px 40px;
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 5px;
     margin-right: 5px;
 }

 .detail-left li .left-icon6 {
     width: 30px;
     height: 30px;
     background-image: url("../image/left-设置-50.png");
     background-size: 30px 30px;
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 10px;
     margin-right: 10px;
 }


 .detail-left li .left-icon7 {
     width: 30px;
     height: 30px;
     background-image: url("../image/left-帮助-50.png");
     background-size: 30px 30px;
     background-repeat: no-repeat;
     background-position: left center;
     margin-left: 10px;
     margin-right: 10px;
 }


 .detail-right {
     width: 911px;
     height: 870px;
     background-color: #eaf2fb;
     border-radius: 15px;
 }

 .right-top {
     display: flex;
     align-items: center;
     margin-top: 20px;
 }

 .right-top h1 {
     width: 300px;
     font-size: 20px;
     color: #322e3f;
     margin-left: 30px;
     margin-right: 280px;
 }

 .right-top .search {
     width: 400px;
 }